<%@page import="edu.mta.pokerstats.Team"%>
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<script type="text/javascript" src="js/SignUp.js"></script>
<div id="divSignUp">
	<div>
		<label>Username:</label><br/>
		<input title="Use only English Letters and Numbers!" type="text" id="playerUsername">
		<span id='usernameError' class='ErrorNoDisplay inputError'><img src='res/img/error.png' title="Please enter a valid username."/></span>
		<span id='usernameUniqueError' class='ErrorNoDisplay inputError'><img src='res/img/error.png' title="Chosen username is taken, please choose another."/></span>
	</div>
	<div>
		<label>Name:</label><br/>
		<input type="text" id="playerName">
		<span id='nameError' class='ErrorNoDisplay inputError'><img src='res/img/error.png' title="Please enter your name."/></span>
	</div>
	<div>
		<label>Birthday:</label><br/>
		<input type="date" id="playerBirthday">
		<img class='inputInfo' src='res/img/info.png' title="You may leave this field blank."/>
	</div>
	<div>
		<label>Password:</label><br/>
		<input title="Use only English Letters and Numbers!" type="password" id="playerPassword">
		<span id='passwordError' class='ErrorNoDisplay inputError'><img src='res/img/error.png' title="Please choose a password."/></span>
	</div>
	<div>
		<label>Confirm Password:</label><br/>
		<input type="password" id="playerPasswordConfirm">
		<span id='passwordConfirmError' class='ErrorNoDisplay inputError'><img src='res/img/error.png' title="Passwords must match!"/></span>
	</div>
	<div>
		<label>Team:</label>
		<span id='radioError' class='ErrorNoDisplay inputError'><img src='res/img/error.png' title="Please select one of the options."/></span><br/>
		<input type="radio" name="playerTeam" value="newTeam" onchange="toggleTeams()"/> Create a new team <br/>
		<input type="radio" name="playerTeam" value="existingTeam" onchange="toggleTeams()"/> Join an existing team <br/>
		<div id="divExistingTeams" hidden="hidden">
			<label>Choose a team: </label>
			<select id="listOfTeams">
				<% for (Team team : Team.getTeamsInSystem()) {%>
					<option value="<%=team.getId()%>"><%=team.getName()%></option>
				<%}%>
			</select>
			<span id='teamJoinError' class='ErrorNoDisplay inputError'><img src='res/img/error.png' title="You must select an existing team to join."/></span>
		</div>
		<div id="divNewTeam" hidden="hidden">
			<label> Name your new team: </label><br/>
			<input title="Use only English Letters and Numbers!" type="text" id="teamName">
			<span id='teamNameError' class='ErrorNoDisplay inputError'><img src='res/img/error.png' title="Please choose a Team name."/></span>
			<span id='teamUniqueError' class='ErrorNoDisplay inputError'><img src='res/img/error.png' title="Chosen team name is taken, please choose another."/></span>
		</div>
	</div>
	<br/>
	<button class="ButtonLogInSignUp" id="playerSignUp" onClick="submitNewPlayer()">Sign Up!</button>
</div>
<div id="submitResult" hidden="hidden"></div>